<template>
<view class="home-index">
	<view class="task-title">
		<view class="task-title-fixed">
			<view class="left">
				<view class="item" v-for="(tab, inx) in titleTabs" :key="inx" @click="activeIndex=inx" :class="{'active': activeIndex==inx}">
					<text>{{tab}}</text>
				</view>
			</view>
		</view>
		
	</view>
	<home
		v-if="activeIndex==0"
		:on-show="onShowChange"
		:on-reach-bottom="reachBottom"
	></home>
	<pending v-else-if="activeIndex==1"
		:on-show="onShowChange"
		:on-reach-bottom="reachBottom"
	></pending>
	<create-course v-else-if="activeIndex==2"></create-course>
</view>
</template>
<script>
import home from '../recommend/home.vue'
import createCourse from '../recommend/create-course.vue'
import pending from './pending.vue'

export default {
	components: {
		createCourse,
		home,
		pending
	},
    data() {
        return {
			activeIndex: 0,
			titleTabs: ['我的校园', '审核', '开课'],
			onShowChange: 0,
			reachBottom: 0,
		} 
	},
	onShow() {
		this.activeIndex =  getApp().globalData.taskPageIndex>0? getApp().globalData.taskPageIndex : this.activeIndex; // 个人中心跳转
		getApp().globalData.taskPageIndex = -1;
		// #ifdef H5
		this.onShowChange ++
		this.utils.showRedDot()
		// #endif
		// #ifdef APP-PLUS
		let isRefresh = getApp().globalData.isRefreshContent
		if(isRefresh){
			this.onShowChange++
			getApp().globalData.isRefreshContent = false
		}
		// #endif
	},
	onLoad() {
		this.utils.showRedDot()
		if(!getApp().globalData.isStudent){
			this.utils.setTTabBar()
		}
		
	},
	onReachBottom(){
		this.reachBottom ++
		
	},
	methods: {
		createTask(){
			uni.navigateTo({
				url: '/pages/teachers/publish-page'
			})
		},
	}
}
</script>
<style lang="less" scoped>
	.home-index{
		// min-height: 100vh;
		// // #ifdef H5
		// min-height: calc(100vh - 44px);
		// // #endif
		background-color: #F9F9F9;
	}
	.task-title-fixed{
		top: 0;
		position: fixed;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
        height: 220rpx;
		/* #endif */
		/* #ifndef H5 */
		left: 0;
		right: 0;
		/* #endif */
		padding: 0 32rpx 8rpx;
		padding-top: 27rpx;
		// #ifdef APP-PLUS
		padding-top: calc(27rpx + 27px);
        height: 247rpx;
		// #endif
        box-sizing: border-box;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		color: #666;
		font-size: 32rpx;
        background-image: url('~@/static/campus/rec-bg.png');
        background-size: cover;
        background-repeat: no-repeat;
		background-color: #fff;
		background-position: 0, -36rpx;
		z-index: 1;
	}
	.task-title{
		height: 110rpx;
		// #ifdef APP-PLUS
		height: calc(110rpx + 27px);
		// #endif
		.left{
			display: flex;
			align-items: center;
		}
		.item{
            padding: 0 18rpx;
            height: 60rpx;
            line-height: 60rpx;
			margin-right: 36rpx;
            border-radius: 16rpx;
            text-align: center;
            font-size: 32rpx;
            font-weight: bold;
		}
		.active{
			
			color: #FFFFFF;
			font-size: 36rpx;
			position: relative;
            background-color: #262E3F;
			
			text{
				position: relative;
				z-index: 1;
			}
		}
		.rili-icon{
			width: 37rpx;
			height: 40rpx;
		}
	}
</style>